
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Online Payment</title>
<style>
  :root {
    --primary: #2563eb;
    --secondary: #f3f4f6;
    --muted: #6b7280;
    --tag-bg-blue: #dbeafe;
    --tag-color-blue: #1e40af;
    --tag-bg-green: #dcfce7;
    --tag-color-green: #166534;
    --tag-bg-yellow: #fef9c3;
    --tag-color-yellow: #854d0e;
    --tag-bg-red: #fee2e2;
    --tag-color-red: #991b1b;
  }
  body {
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 16px;
    background: #f9fafb;
    position: relative;
  }
  .card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    margin-bottom: 16px;
  }
  .section-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
  }
  .transfer-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .qr-box { width: 240px; height: 240px; }
  .transfer-details { flex: 1; min-width: 220px; }
  .info-row { display: flex; align-items: flex-start; margin-bottom: 10px; gap: 8px; }
  .info-label { width: 80px; font-size: 14px; font-weight: 600; color: #374151; flex-shrink: 0; }
  .info-value { font-size: 14px; word-break: break-all; flex: 1; }
  .info-value.address {
    background: #f3f4f6;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: monospace;
  }
  .tag { display: inline-block; padding: 2px 8px; font-size: 13px; font-weight: 600; border-radius: 6px; }
  .tag.blue   { background: var(--tag-bg-blue); color: var(--tag-color-blue); }
  .tag.green  { background: var(--tag-bg-green); color: var(--tag-color-green); }
  .tag.yellow { background: var(--tag-bg-yellow); color: var(--tag-color-yellow); }
  .tag.red    { background: var(--tag-bg-red); color: var(--tag-color-red); }
  .btn { display: inline-block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; text-align: center; }
  .btn.primary { background: var(--primary); color: #fff; }
  .btn.secondary { background: var(--secondary); color: #111; }
  .btn-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .btn, .btn.secondary { flex: 1; min-width: 120px; }
  @media (max-width:480px){
    .transfer-info { justify-content: center; text-align: center; }
    .transfer-details { text-align: left; width: 100%; }
    .info-label { width: 70px; }
  }

  /* 语言选择样式 */
  .lang-switch {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
  .lang-switch select {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
  }
  .lang-switch:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
</style>
</head>
<body>

<!-- 语言切换 -->
<!-- <div class="lang-switch">
  🌐
  <select id="langSelect" onchange="setLang(this.value)">
    <option value="zh">中文</option>
    <option value="en">English</option>
  </select>
</div> -->

<!-- 转账信息 -->
<div class="card">
  <div class="section-title" data-i18n="title">转账信息</div>
  <div class="transfer-info">
    <div id="qrcode" class="qr-box"></div>
    <div class="transfer-details">
      <div class="info-row">
        <div class="info-label" data-i18n="network">网络</div>
        <div class="info-value"><span id="nettype" class="tag blue">TRC20</span></div>
      </div>
      <div class="info-row">
        <div class="info-label" data-i18n="address">地址</div>
        <div class="info-value address" id="addrText">TYtVuT4PNgGkAhKDKnwYXPCSzZCj4xevth</div>
      </div>
      <div class="info-row">
        <div class="info-label" data-i18n="amount">金额</div>
        <div class="info-value"><span class="tag green" id="amountText">100 USDT</span></div>
      </div>
      <div class="info-row">
        <div class="info-label" data-i18n="notice">提醒</div>
        <div class="info-value">
          <span class="tag yellow" id="timeNotice" data-i18n="timeNotice">请在30分钟内完成支付</span>
        </div>
      </div>
      <div class="btn-row">
        <button id="btnAddr" data-clipboard-text="TYtVuT4PNgGkAhKDKnwYXPCSzZCj4xevth" class="btn primary copybtn" data-i18n="copyAddr">复制地址</button>
        <button id="btnAmount" data-clipboard-text="1000" class="btn secondary copybtn" data-i18n="copyAmount">复制金额</button>
      </div>
    </div>
  </div>
</div>

<script src="/utils/jq.js"></script>
<script src="/utils/comm.js"></script>
<script src="/utils/qrcodejs/qrcode.min.js"></script>
<script src="/utils/axios.min.js"></script>
<script src="/utils/clipboard.min.js"></script>
<script>
var i18n = {
  zh: { title:"转账信息", network:"网络", address:"地址", amount:"金额", notice:"提醒", timeNotice:"请在15分钟内完成支付", copyAddr:"复制地址", copyAmount:"复制金额" },
  en: { title:"Transfer Info", network:"Network", address:"Address", amount:"Amount", notice:"Notice", timeNotice:"Please complete payment within 15 minutes", copyAddr:"Copy Address", copyAmount:"Copy Amount" }
};

var currentLang = "en";
setLang(currentLang);
function setLang(lang) {
  currentLang = lang;
  document.querySelectorAll("[data-i18n]").forEach(el => {
    let key = el.getAttribute("data-i18n");
    if (i18n[currentLang][key]) el.innerText = i18n[currentLang][key];
  });
}

// 自动检测浏览器语言
function detectLang() {
  let lang = navigator.language || navigator.userLanguage || "zh";
  currentLang = lang.startsWith("en") ? "en" : "zh";
  //document.getElementById("langSelect").value = currentLang;

  currentLang = "en";
  setLang(currentLang);
}

// 延迟+canvas二维码生成
function generateQR(text){
  const qrEl = document.getElementById("qrcode");
  if(!qrEl) return;
  qrEl.innerHTML = "";
  setTimeout(() => {
    new QRCode(qrEl, {
      text: text,
      width: 240,
      height: 240,
      colorDark:"#111827",
      colorLight:"#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
      render: "canvas"
    });
  }, 50);
}

// 获取 URL 参数
function getQueryString(name){
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  return r ? decodeURIComponent(r[2]) : null;
}

window.addEventListener("DOMContentLoaded", function(){
  detectLang();

  // 初始化复制功能
  var clipboard = new ClipboardJS('.copybtn');
  clipboard.on('success', function(e){
    alert(currentLang === "zh" ? "复制成功: "+e.text : "Copied: "+e.text);
    e.clearSelection();
  });
  clipboard.on('error', function(e){
    alert(currentLang === "zh" ? "复制失败" : "Copy failed");
  });

  // 读取订单信息
  let out_trade_no = getQueryString('out_trade_no');
  let url = "http://192.168.3.76:8000/api/order/info";
  url='/api/order/info'
  comm.post({
    url: url,
    data: { out_trade_no: out_trade_no },
    callback: function(res){
      let a = parseFloat(res.data.amount).toFixed(2);

      $("#amountText").text(`${a} USDT`);
      $("#addrText").text(res.data.address);

      $("#btnAddr").attr("data-clipboard-text", res.data.address);
      $("#btnAmount").attr("data-clipboard-text", a);

      if(res.data.channel_id==1){
        $("#nettype").text("TRC20")
        //$("#amountText").text(`${a} USDT`);
      }
      if(res.data.channel_id==2){
        $("#nettype").text("ERC20")
        //$("#amountText").text(`${a}`);
      }

      if(res.data.channel_id==3){
        $("#nettype").text("BEP20")
        //$("#amountText").text(`${a}`);
      }


      generateQR(res.data.address);
    }
  });
});
</script>
</body>
</html>
